// services/persons.js
import axios from "axios";
const baseURL = "http://localhost:3001/persons"

const getPersons = async () => {
  const request = axios.get(baseURL)
  const response = await request;
  return response.data;
}

const postPerson = async (person) => {
  const request = axios.post(baseURL, person)
  const response = await request;
  return response.data;
}

const deletePerson = async (id) => {
  const request = axios.delete(`${baseURL}/${id}`)
  const response = await request;
  return response.data;
}

const putPerson = async (newPhonebook,id) => {
  const request = axios.put(`${baseURL}/${id}`, newPhonebook)
  const response = await request;
  return response.data;
}

export default {
  getPersons,
  postPerson,
  deletePerson,
  putPerson
}

// App.js
import React, { useState, useEffect } from 'react'
import personService from './services/persons'

const Filter = ({filter, handleFilterChange}) => {
  return (
    <form>
      <div>
        filter shown with<input value={filter} onChange={handleFilterChange}></input>
      </div>
    </form>
  )
}

const PersonForm = ({ persons, setPersons }) => {

  const [newName, setNewName] = useState('')
  const [newNumber, setNewNumber] = useState('')

  const handleNameChange = (event) => setNewName(event.target.value)
  const handleNumberChange = (event) => setNewNumber(event.target.value)

  const containsPerson = (persons, newName) =>
    persons.some((person) => person.name === newName)

  const addPerson = (event) => {
    event.preventDefault()
    const contains = containsPerson(persons, newName)
    console.log(contains)
    if (contains) {
      alert(`${newName} already in phonebook`)
      return
    }
    const personObject = {
      name: newName,
      number: newNumber,
    }
    personService
      .postPerson(personObject)
      .then((returnPerson) =>{
        setPersons(persons.concat(returnPerson))
      })
    setNewName('')
    setNewNumber('')
  }

  return (
    <form onSubmit={addPerson}>
      <div>
        name: <input value={newName} onChange={handleNameChange} />
      </div>
      <div>number: <input value={newNumber} onChange={handleNumberChange} /></div>
      <div>
        <button type="submit">add</button>
      </div>
    </form>
  )
}

const Persons = ({persons}) => {
  return persons.map((person) => <p key={person.id}>{person.name} {person.number}</p>)
}

const App = () => {
  const [persons, setPersons] = useState([])
  const [filter, setFilter] = useState('')
  const [filterPersons, setFilterPersons] = useState(persons)
  
  const handleFilterChange = (event) => {
    setFilter(event.target.value)
    setFilterPersons(persons.filter((person) => (person.name.toLowerCase().indexOf(event.target.value.toLowerCase()) !== -1)))
  }
  useEffect(() => {
    personService
      .getPersons()
      .then((returnPersons) => {
        setPersons(returnPersons)
      })
  }, [])

  return (
    <div>
      <h2>Phonebook</h2>
      <Filter filter={filter} handleFilterChange={handleFilterChange}></Filter>
      <h2>add a new</h2>
      <PersonForm persons={persons} setPersons={setPersons}></PersonForm>
      <h2>Numbers</h2>
      {filter===''?
      <Persons persons={persons}></Persons>:
      <Persons persons={filterPersons}></Persons>
      }
    </div>
  )
}

export default App

// index.js
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />,document.getElementById('root'));

